<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${path}/static/lib/bootstrap-3.3.7-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="${path}/static/lib/layui/css/layui.css" media="all">
</head>
<body>
	搜索
	<div class="demoTable">
	  <div class="layui-inline">
		ID：
	    <input name="id" id="searchId" autocomplete="off">
		名字：
	    <input name="name" id="searchName" autocomplete="off">
	  </div>
	  <button class="layui-btn" data-type="reload">搜索</button>
	</div>
	
	<table id="tableId" lay-filter="tableFilter"></table>
	
	<script type="text/html" id="topToolbarId">
  		<div class="layui-btn-container">
    		<button class="layui-btn layui-btn-sm" lay-event="insert">添加</button>
    		<button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
 	 	</div>
	</script>
	
	<script type="text/html" id="toolbarId">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
	<script type="text/html" id="userNameTpl">
  		<a href="${path}/user/getUserInfo.action?id={{d.user.id}}" class="layui-table-link">{{d.user.name}}</a>
	</script>
	
	<script type="text/html" id="statusTpl">
  	{{#  if(d.status == 1){ }}
		在售
  	{{#  } else if(d.status == 2) { }}
    	下架
    {{#  } else if(d.status == 3) { }}
    	删除
  	{{#  } }}
	</script>
	
	<script type="text/html" id="mainImageTpl">
  		<img src="{{d.mainImageFullUrl}}"></img>
	</script>
	
	<script src="${path}/static/lib/jquery-1.11.3.js"></script>
	<script src="${path}/static/lib/mylayer.js"></script>
	<script src="${path}/static/lib/util.js"></script>
	<script src="${path}/static/lib/layui/layui.js"></script>
	
	<script>
		layui.use(['table', 'util'], function(){
		  // 只加载LayUI的table模块
		  var table = layui.table;
		  var util = layui.util;
		  
		  //第一个实例
		  table.render({
			id: "tableReload"
		    ,elem: '#tableId'
		    ,toolbar: '#topToolbarId' //开启头部工具栏，并为其绑定左侧模板
		    ,height: 540
		    ,url: '${path}/userAction_pageList' //数据接口
		    ,page: true //开启分页
		    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
		    ,cols: [[ //表头
		      {type: 'checkbox', fixed: 'left'}
		      ,{field: 'id', title: 'ID', sort: true}
		      ,{field: 'name', title: '用户名'}
		      ,{field: 'password', title: '密码'}
		      ,{field: 'age', title: '年龄'}
		      ,{title:'操作', toolbar: '#toolbarId', fixed: 'right'}
		    ]]
		  });
		  
		  //头工具栏事件
		  table.on('toolbar(tableFilter)', function(obj){
		    var checkStatus = table.checkStatus(obj.config.id);
		    switch(obj.event){
		      case 'deleteAll':
		        var data = checkStatus.data;
		       	// [{"id":40,"name":"zhansgan","age":34,"gender":"男"},{"id":41,"name":"admin","age":34,"gender":"女"}]
		       	var ids = [];// [1,2,3]
		       	for (var i in data) {
		       		ids.push(data[i].id);
		       	}
		       	ids = ids.join(','); // '1,2,3'
		       	layer.confirm('真的删除行么', function(index){
			    	  $.ajax({
			    		  url : "${path}/product/deleteAll.action",
			    		  data : {"ids" : ids},
			    		  dataType : "json",
			    		  type : "post",
			    		  success : function(jsonObj) {
			    			  if (jsonObj.code == util.SUCCESS) {
			    				  mylayer.successMsg(jsonObj.msg);
			    				  // 重新加载数据表格
			    				  table.reload("tableReload");
			    			  } else {
								  mylayer.errorMsg(jsonObj.msg);		    				  
			    			  }
			    		  }
			    	  });
			          layer.close(index);
			      });
		      break;
		      case 'insert':
		    	  layer.open({
						type : 2, // iframe
						title : "添加",
						area : ["700px", "450px"],
						content : "${path}/product/getProductInsertPage.action"
					});
		      break;
		    };
		  });
		  
		 //监听行工具事件
		  table.on('tool(tableFilter)', function(obj){
		    var data = obj.data;
		    console.log(obj)
		    // {tr: jQuery.fn.init(3), data: {…}, del: ƒ, update: ƒ, event: "edit"}
		    console.log(obj.data)
		    // {id: 33, name: "superadmin", age: 99, gender: "女"}
		    if(obj.event === 'del'){
		      layer.confirm('真的删除行么', function(index){
		    	  $.ajax({
		    		  url : "${path}/userAction_deleteById",
		    		  data : {"id" : data.id},
		    		  dataType : "json",
		    		  type : "post",
		    		  success : function(jsonObj) {
		    			  if (jsonObj.code == util.SUCCESS) {
		    				  mylayer.successMsg(jsonObj.msg);
		    				  // 重新加载数据表格
		    				  table.reload("tableReload");
		    			  } else {
							  mylayer.errorMsg(jsonObj.msg);		    				  
		    			  }
		    		  }
		    	  });
		          layer.close(index);
		      });
		    } else if(obj.event === 'edit'){
		       
		    }
		  });
		 
		 
		  var $ = layui.$, active = {
		    reload: function(){
		      
		      //执行重载
		      table.reload('tableReload', {
		        page: {
		          curr: 1 //重新从第 1 页开始
		        }
		        ,where: {
		        	// /pageList.action?page=1&limit=10&id=1064
		            id: $('#searchId').val(),
		            name: $('#searchName').val()
		        }
		      }, 'data');
		    }
		  };
		  
		  $('.demoTable .layui-btn').on('click', function(){
		    var type = $(this).data('type');// data-type="reload"
		    active[type] ? active[type].call(this) : '';
		  });
		  
		});
	</script>
</body>
</html>